<template>
  <div id="app">
    <template v-if="login">
      <div class="sys-top">
        <top-header @changeSkin="changeSkin" @appDownload="handleAppDownload"></top-header>
      </div>
      <div class="sys-center">
        <left-menu></left-menu>
        <div class="center-page">
          <!-- <pageTags></pageTags> -->
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive" class="myroute"></router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive"></router-view>
          <!--<load v-if="loading"></load>-->
        </div>
      </div>
    </template>
    <template v-if="!login">
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </template>
    <AppDownload v-if="appDownloadShow" @close="handleAppDownload"></AppDownload>
  </div>
</template>

<script>
import topHeader from "./system/frame/topHeader.vue";
import leftMenu from "./system/frame/leftMenu.vue";
import pageTags from "./system/frame/pageTags.vue";
import AppDownload from '@/system/pages/appDownload'
//import load from "./system/components/load.vue";

export default {
  name: "App",
  components: {
    topHeader,
    leftMenu,
    pageTags,
    AppDownload
    //  load,
  },
  data: function () {
    return {
      login: false,
      loading: false,
      tOut: 90, //超时时间10min
      interval: null,
      appDownloadShow: false
    };
  },
  watch: {
    "$store.state.user.loginstatus": function (e) {
      //登录状态
      this.login = e;
      if (!e) {
        this.$router.push({
          path: "/login",
        });
      } else {
        //      this.interval = setInterval(this.tTime, 10000);//clearInterval
      }
    },
    $route() {
      this.addViewTags();

      var nowpath = this.$route.path;
      if (nowpath == "/login") {
        this.login = false;
      } else if (nowpath !== "/") {
        if (sessionStorage.getItem("loginstatus") == "true") {

          this.login = true;
        } else {
          this.$router.push({
            path: "/login",
          });
        }
      }
    },
  },
  mounted: function () {
    var acttag = this.$store.state.tagsview.activetag;
    this.login = sessionStorage.getItem("loginstatus") == "true";
    if (this.login) {
      if (acttag && this.login) {
        this.linkClick(acttag);
      }
    } else {
      this.$router.push({
        path: "/login",
      });
    }

    let localurl = window.location.href.split("jypw")[0] + "jypw/";
    let path = "";
    if (localurl.indexOf("localhost") == -1) {
      path = localurl;
    }

    document.head
      .querySelector("#skin")
      .setAttribute("href", `${path}/skin/day.css`);
  },
  methods: {
    tTime() {
      let noRequest = this.$store.state.commonData.noRequest + 1;
      this.$store.dispatch("refreshNoRequest", noRequest);
      if (noRequest > this.tOut) {
        if (this.interval) {
          clearInterval(this.interval);
          this.interval = null;
        }
        this.$store.dispatch("LogOut");
      }
    },
    addViewTags() {
      //路由改变时执行的方法

      if (this.$route.name) {
        const route = this.$route;
        this.$store.dispatch("addVisitedViews", route);
      }
    },
    changeSkin(v) {
      let type;
      if (!v) {
        type = "day";
      } else {
        type = "night";
      }
      let localurl = window.location.href.split("jypw")[0] + "jypw/";
      let path = "";
      if (localurl.indexOf("localhost") == -1) {
        path = localurl;
      }

      document.head
        .querySelector("#skin")
        .setAttribute("href", `${path}/skin/${type}.css`);
    },
    handleAppDownload(e) {
      this.appDownloadShow = e
    }
  },
};
</script>

<style lang="scss" scoped>
// TODO 手动引入公共CSS文件
@import url('/skin/day.css');

// @import url('/skin/night.css');
@font-face {
  font-family: "iconfont";
  /* project id 1906267 */
  src: url("//at.alicdn.com/t/font_1906267_6ugrr0p63s2.eot");
  src: url("//at.alicdn.com/t/font_1906267_6ugrr0p63s2.eot?#iefix") format("embedded-opentype"),
    url("//at.alicdn.com/t/font_1906267_6ugrr0p63s2.woff2") format("woff2"),
    url("//at.alicdn.com/t/font_1906267_6ugrr0p63s2.woff") format("woff"),
    url("//at.alicdn.com/t/font_1906267_6ugrr0p63s2.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_1906267_6ugrr0p63s2.svg#iconfont") format("svg");
}

.iconfont {
  font-family: "iconfont";
  font-size: 16px;
}

*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  width: 100%;
  height: 100%;
  position: absolute;
  background: var(--app-back-color);
  min-width: 1200px;
}

.sys-top {
  height: 56px;
  width: 100%;
  line-height: 56px;
}

.sys-center {
  display: flex;
  width: 100%;
  height: calc(100% - 56px);
}

/*头部信息样式*/
.head-info-divhover:hover {
  cursor: pointer;
}

/*头部菜单的hover*/
.top-menu-hover:hover {
  color: #5ea9f5;
  cursor: pointer;
}

/*tag 样式*/
.head-tags {
  height: 30px;
  width: 100%;
  display: flex;
  padding: 0 10px;
  margin-bottom: 12px;
  align-items: center;
  padding-left: 0;
}

/*页面样式*/
.pagecontent {
  width: 100%;
  height: calc(100% - 42px);
}

/* 遮罩 */
.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 中心遮罩
.maskCenter {
  height: calc(100% - 78px);
  width: calc(100% - 75px);
  position: fixed;
  top: 78px;
  left: 75px;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  // background: rgba(226, 14, 14, 0.1);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*页面 分左右2部分的样式*/

.center-page {
  background: var(--system-bgc);
  width: calc(100% - 75px);
  height: 100%;
  padding: 20px;
  padding-top: 12px;
  margin-left: 75px;
}

::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--system-scrollbar-thumb);
  border-radius: 5px;
}

.current-row>td {
  background: var(--w-row-hover-color);
  opacity: 0.9;
}

// .el-button--mini,
// .el-button--small {
//   width: 79px;
//   height: 28px;
//   border: 1px solid var(--border-color);
//   border-radius: 4px;
//   font-size: 14px;
//   font-family: Microsoft YaHei;
//   font-weight: 400;
//   color: var(--text-color);
// }

// .el-button.is-disabled,
// .el-button.is-disabled:focus,
// .el-button.is-disabled:hover {
//   color: #c0c4cc;
//   border-color: #ebeef5;
// }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition-delay: 99999s;
  -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}

.el-table tbody tr:hover>td {
  background-color: var(--table-row-hover-color) !important;
}

/* messageBox 样式 */
.el-message-box__wrapper>.el-message-box {
  width: 555px;
  height: 188px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0px 5px 20px 0px rgba(68, 104, 211, 0.25);
  border-radius: 4px;
  position: relative;

  .el-message-box__header {
    height: 47px;
    line-height: 47px;
    border-bottom: 1px solid rgba(204, 204, 204, 0.6);
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    padding-left: 30px;
    padding-right: 30px;

    .el-message-box__headerbtn {
      width: 12px;
      height: 12px;
      color: rgba(102, 102, 102, 1);
      top: 50%;
      right: 30px;
      transform: translateY(-50%);
    }
  }

  .el-message-box__content {
    font-size: 14px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    height: calc(100% - 47px);
    padding-left: 30px;
    padding-top: 40px;
  }

  .el-message-box__btns {
    position: absolute;
    right: 30px;
    bottom: 18px;
    display: inline-flex;
    flex-direction: row-reverse;
    padding: 0;

    button {
      width: 68px;
      height: 28px;
      border: 1px solid rgba(83, 168, 255, 1);
      border-radius: 4px;
      background-color: rgba(250, 251, 251, 1);
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-left: 30px;
      color: rgba(102, 102, 102, 1);

      &:hover,
      &:active {
        background: rgba(81, 167, 254, 1);
        border-radius: 4px;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}

/*流程 业务模型  表单定义 工具栏图标样式*/
.toolbtn {
  color: var(--system-form-text-color);
}

/*开关按钮*/
.systemSwitch .el-switch__core {
  border-color: var(--switch-back-color);
  background-color: var(--switch-back-color);
}

.systemSwitch .el-switch.is-checked .el-switch__core {
  border-color: var(--switch-back-checked-color);
  background-color: var(--switch-back-checked-color);
}

/*设置element下拉框 option 选项样式 */
.el-select-dropdown__list {
  background: var(--select-back-color);
  border-radius: 4px;
}

.el-select-dropdown__item {
  background: var(--select-back-color);
  color: var(--select-text-color);
}

.el-select-dropdown__item.selected {
  color: var(--select-selected-text-color);
}

.el-select-dropdown__item:hover {
  background: var(--select-hover-back-color);
  color: var(--select-hover-text-color);
}

.el-select-dropdown__item.hover {
  background: var(--select-hover-back-color);
}

/*搜索框样式*el-select-dropdown el-popper myselect*/
.el-select-dropdown.el-popper.myselect {
  background: var(--page-back-color);
  color: var(--page-lable-text-color);
  box-shadow: 0px 10px 20px 0px var(--drop-menu-boxshadow-color), 0px -10px 20px 0px var(--drop-menu-boxshadow-color);
  border: none;
}

.myselect .headOption {
  color: var(--page-lable-text-color);
  background: var(--win-page-back-color);
}

.myselect .headOption.hover {
  background: var(--button-hover-back-color) !important;
  color: var(--button-active-text-color) !important;
}

/*设置空数据*/
.el-select-dropdown__empty {
  background: var(--select-back-color);
  color: var(--select-text-color);
  border-radius: 4px;
}

/*设置下拉框边框颜色*/
.el-select-dropdown {
  border: 1px solid var(--system-form-input-border-color);
  border-radius: 4px;
}

/*/设置下拉框距离输入框的距离*/
.el-popper[x-placement^="bottom"] {
  margin-top: 6px;
}

/*设置箭头边的颜色*/
.el-popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: var(--system-form-input-border-color);
}

/*设置下拉框箭头颜色*/
.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: var(--select-back-color);
}

/*数字输入框*/
.el-input-number {
  width: calc(100% - 2px);
}

.el-input-number__decrease.is-disabled,
.el-input-number__decrease,
.el-input-number__increase {
  width: 28px;
  color: var(--input-number-icon-text);
  background: var(--input-number-icon-back);
}

// 业务模块
// 一级弹框
// 业务模块遮罩
.businessMask {
  height: calc(100% - 78px);
  width: calc(100% - 75px);
  position: fixed;
  top: 78px;
  left: 75px;
  bottom: 0;
  background: rgba(0, 8, 26, 0.8);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 系统模块通用样式 */

/*
*	系统模块-新增按钮
*	<span class="systemButtonAdd">新增</span>
*
*	系统模块-编辑按钮
*	<span class="systemButtonEdit">编辑</span>
*
*	系统模块-删除按钮
*	<span class="systemButtonDelete">删除</span>
*
* 	系统模块-不可用按钮
*	<span class="systemButtonDisabled">编辑</span>
*
* 	系统模块-查询&确定&取消&保存按钮
*	<span class="systemButtonQuery">查询</span>
*	<span class="systemButtonConfirm">确定</span>
*	<span class="systemButtonCancel">取消</span>
*/
.systemButtonAdd,
.systemButtonEdit,
.systemButtonDelete,
.systemButtonQuery,
.systemButtonConfirm,
.systemButtonCancel,
.systemButtonStart,
.systemButtonSaveIcon,
.systemButtonCancelIcon {
  white-space: nowrap;
  display: inline-block;
  cursor: pointer;
  height: 28px;
  line-height: 28px;
  padding: 0 16px;
  border: 1px solid var(--system-button-border-color);
  border-radius: 4px;
  color: var(--system-button-text-color);

  &::before {
    font-family: "iconfont";
    font-size: 1em;
    margin-right: 5px;
  }
}

.systemButtonDefault {
  border: 1px solid var(--system-button-border-color) !important;
  color: var(--system-button-text-color) !important;
}

.systemButtonAdd::before {
  content: "\e656";
  color: rgba(131, 141, 251, 1);
}

.systemButtonEdit::before {
  content: "\e636";
  color: rgba(39, 149, 253, 1);
}

.systemButtonDelete::before {
  content: "\e63e";
  color: rgba(249, 73, 99, 1);
}

.systemButtonStart::before {
  content: "\e68f";
  color: rgba(39, 149, 253, 1);
}

.systemButtonSaveIcon::before {
  content: "\e634";
  color: rgba(39, 149, 253, 1);
}

.systemButtonCancelIcon::before {
  content: "\e6fd";
  color: rgba(39, 149, 253, 1);
}

.systemButtonAdd:hover,
.systemButtonAdd:active,
.systemButtonEdit:hover,
.systemButtonEdit:active,
.systemButtonDelete:hover,
.systemButtonDelete:active,
.systemButtonQuery:hover,
.systemButtonQuery:active,
.systemButtonConfirm:hover,
.systemButtonConfirm:active,
.systemButtonSaveIcon:hover,
.systemButtonSaveIcon:active,
.systemButtonCancelIcon:hover,
.systemButtonCancelIcon:active,
.systemButtonCancel:hover,
.systemButtonCancel:active,
.systemButtonStart:hover,
.systemButtonStart:active {
  background-color: rgba(83, 168, 255, 1);
  border: 1px solid rgba(83, 168, 255, 1);
  color: rgba(255, 255, 255, 1);
  opacity: 0.6;

  &::before {
    color: rgba(255, 255, 255, 1);
  }
}

.systemButtonDelete:hover,
.systemButtonDelete:active {
  background-color: rgba(249, 73, 99, 1);
  border: 1px solid rgba(249, 73, 99, 1);
}

.systemButtonAdd:active,
.systemButtonEdit:active,
.systemButtonDelete:active,
.systemButtonQuery:active,
.systemButtonConfirm:active,
.systemButtonCancel:active,
.systemButtonEnable:active,
.systemButtonSaveIcon:active,
.systemButtonCancelIcon:active {
  opacity: 0.9;
}

.systemButtonDisabled,
.systemButtonDisabled:hover,
.systemButtonDisabled:active {
  background-color: rgba(214, 221, 228, 1);
  color: var(--button-disable-text-color);
  border: 1px solid rgba(214, 221, 228, 1);
  opacity: 1;
  cursor: not-allowed;

  &::before {
    color: var(--button-disable-text-color);
  }
}

/* 系统页面-头部 */
.systemPage-wrapper {
  height: 100%;

  .topbar {
    height: 56px;
    line-height: 56px;
    background: var(--system-page-topbar-bgc);
    border-radius: 6px;
    margin-bottom: 12px;
    display: flex;
    justify-content: left;
    align-items: center;
  }

  .topbar .iconfont {
    font-size: 24px;
    margin: 0px 14px 0px 20px;
    color: rgba(83, 168, 255, 1);
  }

  .topbar span {
    font-size: 18px;
    font-family: Microsoft YaHei;
    color: var(--system-page-topbar-text-color);
  }

  .content-background {
    background: var(--system-page-content-wrapper-bgc);
    box-shadow: 0px 10px 20px 0px rgba(204, 204, 204, 0.1);
    border-radius: 6px;
    padding: 12px;
    height: calc(100% - 68px);
  }

  .content-wrapper {
    height: 100%;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    background: var(--system-page-content-bgc);
    border: 1px solid var(--system-page-content-border-color);
  }

  .searches-wrapper {
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 1);
    width: calc(100% - 44px);
    overflow-x: auto;
    margin: 0 22px;
    background: var(--searches-wrapper-color);
  }

  .searches-wrapper .buttons-wrapper {
    display: flex;
  }

  .searches-wrapper .buttons-wrapper span {
    margin-right: 10px;
  }

  .query-wrapper {
    display: flex;
    align-items: center;
  }

  .query-box {
    display: flex;
    flex-direction: row;
    margin-left: 32px;

    &.systemButtonQuery {
      margin-left: 20px;
    }

    .span-name {
      height: 32px;
      line-height: 32px;
      margin-right: 17px;
      white-space: nowrap;
    }

    .el-input {
      width: 140px;
      height: 32px;

      .el-input__inner {
        height: 32px;
        border: 1px solid var(--el-input-border-color);
        background: var(--el-input-background-color);
      }
    }

    .el-input__icon {
      line-height: 32px;
    }

    .el-button {
      height: 32px;
      padding: 0 16px !important;
    }

    .el-input__inner {
      height: 32px !important;
      line-height: 32px !important;
    }
  }
}

/*
*	系统模块-表格
*	<el-table class="systemTable"></el-table>
*/
.systemTable,
.systemTable::before {
  background-color: transparent;
}

.systemTable .el-table__header tr,
.systemTable .el-table__header th {
  padding: 0;
  height: 40px;
  line-height: 40px;
  background-color: var(--system-table-header-bgc);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: var(--system-table-text-color);
  border-bottom: none;
}

.systemTable .el-table__body-wrapper {
  background-color: transparent;
  overflow: auto;
}

.systemTable .el-table__body-wrapper tr td {
  //border: none;
}

/*奇数行颜色*/
.systemTable.el-table td {
  background: var(--table-row-odd-back-color) !important;
}

/*偶数行颜色*/
.systemTable.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: var(--table-row-even-back-color) !important;
}

.systemTable .el-table__body-wrapper tr:hover {
  background-color: var(--table-row-hover-color);
}

.systemTable .el-table__body-wrapper tr:hover td,
.systemTable.el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: var(--table-row-hover-color) !important;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}

// 选中行
.systemTable .el-table__body-wrapper tr.checkedRow td,
.systemTable.el-table--striped .el-table__body tr.el-table__row--striped.checkedRow td {
  background-color: var(--table-row-hover-color) !important;
}

.systemTable .el-table__body-wrapper td {
  height: 40px;
  line-height: 40px;
  padding: 0;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}

.systemTable .cell {
  color: var(--table-text-color);
}

.systemTable .el-checkbox__inner {
  width: 14px;
  height: 14px;
  background: rgba(238, 238, 238, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 4px;
}

.systemTable .el-table__body-wrapper tr:hover .el-checkbox__inner {
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(29, 191, 206, 1);
  border-radius: 4px;
}

.systemTable .el-checkbox__input.is-checked .el-checkbox__inner {
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(29, 191, 206, 1);
  border-radius: 4px;
  padding: 0;
}

.systemTable .is-focus .el-checkbox__inner {
  border: 1px solid rgba(29, 191, 206, 1);
}

.systemTable .is-indeterminate .el-checkbox__inner {
  border: 1px solid rgba(29, 191, 206, 1);
  background-color: rgba(29, 191, 206, 1);
}

.systemTable .el-checkbox__input.is-checked .el-checkbox__inner::after {
  width: 10px;
  height: 10px;
  left: 0;
  top: 1px;
  background-color: rgba(29, 191, 206, 1);
  border-radius: 4px;
  transform: rotate(90deg);
}

/*
*	系统模块-页码
*	<el-pagination
*		class="systemPagination"
*		layout="sizes,slot, prev, pager, next, jumper"
*	>
*		<span class="totalCount">从{{start}}到{{end}}/共{{totalCount}}条数据</span>
*	</el-pagination>
*/
.systemPagination,
.systemPagination .el-pagination__total,
.systemPagination .el-pager li.more,
.systemPagination .el-pagination__jump {
  color: var(--page-lable-text-color) !important;
}

.systemPagination .el-pagination__sizes {
  margin-right: 5px;
}

.systemPagination .el-pagination__sizes input {
  border: 1px solid var(--page-lable-text-color);
  border-radius: 4px;
  color: var(--page-lable-text-color);
}


.systemPagination .btn-prev,
.systemPagination .btn-next {
  border: 1px solid var(--page-lable-text-color);
  border-radius: 4px;
  color: var(--page-lable-text-color) !important;
}

.systemPagination .btn-next {
  margin-left: 6px !important;
}

.systemPagination .el-pager li {
  border: 1px solid var(--page-lable-text-color);
  margin-left: 6px;
  border-radius: 4px;
}

.systemPagination .el-pager li.active {
  background-color: var(--page-lable-text-color) !important;
  color: #ffffff;
}

.systemPagination .el-pager li.active+li {
  border: 1px solid var(--page-lable-text-color)
}

.systemPagination .el-pagination__jump input {
  border: 1px solid var(--page-lable-text-color);
  border-radius: 4px;
  color: var(--page-lable-text-color);
}

/*
*	系统模块-表单
*	<el-form class="systemForm"></el-form>
*/
.systemForm .el-form-item {
  height: 32px;
  line-height: 32px;
  margin-bottom: 12px;
  position: relative;

  .el-form-item__label {
    height: 32px;
    line-height: 32px;
    // color: var(--system-form-text-color);
  }

  .el-form-item__content {
    height: 32px;
    line-height: 32px;

    .el-input {
      width: 100%;
    }

    .el-select {
      width: 100%;
    }
  }
}

/*
*	系统模块-输入框
*	<el-input class="systemInput"></el-input>
*
*	系统模块-下拉框
*	<el-select class="systemInput"></el-select>
*
*	系统模块-不可用输入框
*	<el-input class="systemInput disabled"></el-input>
*/
.systemInput input,
.systemInput textarea {
  background-color: transparent !important;
  border: 1px solid var(--system-form-input-border-color) !important;
  color: var(--system-form-text-color) !important;
  border-radius: 4px !important;

  &:hover {
    background: var(--input-hover-back-color) !important;
    border: 1px solid var(--input-focus-border-color) !important;
    box-shadow: var(--input-shadow) !important;
  }

  &:focus {
    background: var(--input-focus-back-color) !important;
    border: 1px solid var(--input-focus-border-color) !important;
  }

  &:disable {
    background: var(--system-form-input-disabled-bgc) !important;
    border: 1px solid var(--system-form-input-disabled-border-color) !important;
    color: rgba(153, 153, 153, 1) !important;
  }
}

.systemInput input {
  height: 32px;
}

.el-textarea.is-disabled .el-textarea__inner {
  color: rgba(153, 153, 153, 1) !important;
  font-size: 12px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
}

.systemInput.is-disabled input,
.systemInput .is-disabled input {
  color: rgba(153, 153, 153, 1) !important;

  &:hover {
    box-shadow: none !important;
    border: 1px solid var(--system-form-input-border-color) !important;
  }
}

.systemInput {
  position: relative;

  .el-input-group__append {
    background-color: transparent;
    border: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/*
*	系统模块-时间选择器
* <el-date-picker class="systemDatePicker"></el-date-picker>
*/
.systemDatePicker {
  background-color: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  input {
    background-color: transparent !important;
    color: var(--system-form-text-color) !important;
    border-radius: 4px !important;
  }

  i,
  .el-range-separator {
    color: var(--system-form-text-color) !important;
  }
}

/*
*	系统模块-自定义标签 tab
*	<div class="systemTabs">
*		<span class="active">选中</span>
*		<span>未选中</span>
*		<span>其他选项</span>
*	</div>
*
*	系统模块-element标签 tab
*	<el-tabs class="systemElTabs"></el-tabs>
*/
.systemTabs {
  display: inline-flex;
  height: 28px;
  line-height: 28px;
  border: 1px solid var(--system-tabs-active-bgc);
  border-radius: 4px;

  span {
    padding: 0 12px;
    cursor: pointer;
    border-left: 1px solid var(--system-tabs-active-bgc);
    color: var(--system-tabs-text-color);

    &:first-child {
      border-left: none;
    }

    &.active {
      background: var(--system-tabs-active-bgc);
      color: rgba(255, 255, 255, 1);
    }
  }
}

.systemElTabs .el-tabs__nav-wrap {
  .el-tabs__active-bar {
    background: var(--system-tabs-active-bgc);
  }

  .el-tabs__item {
    color: var(--system-tabs-text-color);

    &.is-active {
      color: var(--system-tabs-active-bgc);
    }
  }

  &::after {
    height: 1px;
    background: rgba(160, 160, 160, 1);
  }
}

/*
*	系统模块-勾选框
*	<el-checkbox class="systemCheckbox"></el-checkbox>
*/
.systemCheckbox {
  font-weight: 400;
  color: var(--system-checkbox-text-color);

  .el-checkbox__inner {
    width: 14px;
    height: 14px;
    background: rgba(238, 238, 238, 1);
    border: 1px solid var(--system-checkbox-border-color);
    border-radius: 4px;

    &:hover {
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(29, 191, 206, 1);
    }
  }

  &.is-checked {
    .el-checkbox__label {
      color: var(--system-checkbox-text-color);
    }

    .el-checkbox__inner {
      width: 14px;
      height: 14px;
      background: var(--system-checkbox-bgc);
      border: 1px solid rgba(29, 191, 206, 1);
      border-radius: 4px;
      padding: 0;

      &::after {
        width: 10px;
        height: 10px;
        left: 0;
        top: 1px;
        background-color: rgba(29, 191, 206, 1);
        border-radius: 4px;
        transform: rotate(90deg);
      }
    }
  }

  .is-focus .el-checkbox__inner {
    border: 1px solid rgba(29, 191, 206, 1);
  }
}

/*
*	系统模块-弹窗
*	<div class="maskCenter"> // 遮罩
*		<div class="systemDialog" style="width: 473px;height: 400px;"> // 宽高自己写
*			<div class="dialog-header">
*				<span>弹窗标题</span>
*				<span class="icon iconfont iconbiaoqianlan-guanbi"></span>
*			</div>
*	    	<div class="dialog-body"></div>
*	    	<div class="dialog-footer right"></div> // 底部按钮区可不写;right-按钮在右边，默认居中
*		</div>
*	</div>
*/
.systemDialog {
  position: fixed;
  margin: auto;
  background: var(--system-dialog-bgc);
  //修改背景色为白色
  // background:white;

  box-shadow: var(--system-dialog-boxshadow);
  border-radius: 4px;
  overflow: hidden;
  animation: myscale 0.4s;

  .dialog-header {
    height: 40px;
    line-height: 40px;
    width: calc(100% - 8px);
    background: var(--system-dialog-title-bgc);
    margin: 4px;
    margin-bottom: 0;
    padding-left: 10px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    color: var(--system-dialog-title-color);
    position: relative;


    .icon {
      cursor: pointer;
      float: right;
      margin-right: 8px;
      //  position: absolute;
      //  right: 8px;
      //  top: 50%;
      //  transform: translateY(-50%);
    }
  }

  .dialog-body {
    height: calc(100% - 92px);
    padding: 12px 16px;
    overflow: auto;
  }

  .dialog-footer {
    height: 48px;

    span {
      margin-left: 20px;
    }

    &.right {
      text-align: right;
      padding-right: 16px;
    }
  }
}

.systemDialog-hide {
  position: fixed;
  margin: auto;
  background: var(--system-dialog-bgc);
  box-shadow: var(--system-dialog-boxshadow);
  border-radius: 4px;
  overflow: hidden;
  animation: myscalehide 0.4s;
  transform: scale(0.6);
  opacity: 0;
}


/*表单打开动画*/
@keyframes myscale {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}


@keyframes myscalehide {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

/*
*	系统模块-时间选择器
*	组织机构模块使用，在 body 外层无法选择
*/
.el-picker-panel {
  &.organizationDatePicker {
    transform: translateX(-10%);
  }

  &.logDatePicker {
    transform: translateX(15%);
  }
}

/* 业务模块通用样式 */
.businessPage-wrapper,
.businessMask .businessDialog .dialog-body .businessPage-wrapper {
  width: 100%;
  height: calc(100% - 42px);

  // 头部区域
  .businessTopbar,
  .windowTopbar {
    width: 100%;
    margin-bottom: 8px;
    background: var(--business-page-topbar-bgc);
    border-radius: 4px;
    display: inline-flex;
    flex-direction: column;
    box-shadow: 0px -2px 0px 0px var(--business-page-topbar-boxshadow-top);
    position: relative;

    // 头部（上）-标题，图标
    .businessTitle-wrapper {
      height: 56px;
      width: 100%;
      padding: 0 16px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 4px 4px 0px 0px;
      box-shadow: 0px 1px 0px 0px var(--business-page-topbar-boxshadow-bottom);

      .businessTitle-left {
        font-size: 18px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: var(--business-page-topbar-title-color);
        height: 56px;
        line-height: 56px;

        .icon {
          margin-right: 16px;
          font-size: 20px;
        }
      }

      .businessTitle-right {
        display: inline-flex;

        .flow-wrapper {
          margin-right: 32px;
          display: inline-flex;

          div {
            margin-left: 16px;
          }
        }
      }
    }

    // 头部（下）-检索区
    .windowSearches,
    .businessSearches-wrapper {
      min-height: 65px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: auto;
      position: relative;

      .businessSearches-left {
        padding-top: 16px;
        padding-bottom: 16px;
        display: inline-flex;
        flex-wrap: wrap;
        width: calc(100% - 232px);

        .businessSearchCondition {
          flex-shrink: 0;
          margin-right: 12px;

          &.hidden {
            visibility: hidden;
            display: none;
          }
        }

        .moreConditionsLabel {
          width: 82px;
          text-align: center;
          border: 1px solid #dce2e6;
          cursor: pointer;
          position: relative;

          &::before {
            position: absolute;
            content: "\e6a9";
            font-family: "iconfont";
            font-size: 16px;
            color: rgba(147, 151, 153, 1);
            right: 9px;
          }
        }

        hr {
          flex: 1;
          display: block;
          border: none;
        }

        .moreConditions {
          text-align: left;

          .businessSearchCondition {
            margin-right: 12px;
            margin-top: 12px;
          }
        }
      }

      .businessSearches-right {
        position: absolute;
        top: 16px;
        right: 16px;
        display: inline-flex;

        span:last-child {
          margin-left: 12px;
        }
      }
    }

    img {
      position: absolute;
      bottom: 0;
      transform: translateY(50%);

      &.imgBefore {
        left: 42px;
      }

      &.imgAfter {
        right: 42px;
      }
    }
  }

  .businessWindowTopbar {
    box-shadow: none;
  }

  // 内容区
  .businessContent-wrapper {
    background: var(--business-page-content-bgc);
    box-shadow: 0px -2px 0px 0px var(--business-page-content-boxshadow);
    border-radius: 4px;

    // 按钮区
    .businessButtons-wrapper {
      height: 64px;
      padding-left: 16px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      span {
        margin-right: 8px;
      }
    }
  }
}

/*
*	业务模块-检索条件
*	<div class="businessSearch">
*		<label>label</label>
*       <el-input></el-input>
*	</div>
*/
.businessSearchCondition {
  display: inline-flex;
  font-size: 12px;
  height: 32px;
  align-items: center;
  background: var(--business-condition-bgc);
  border-radius: 4px;
  border: 1px solid var(--business-condition-bgc);
  padding-left: 8px;

  label {
    white-space: nowrap;
    color: var(--business-condition-label-color);
  }

  .businessConditionInput.el-input,
  .el-input,
  .businessConditionInput .el-input {
    margin-right: 0 !important;
    text-align: left;

    i {
      height: 32px;
      line-height: 32px;
    }

    input {
      border: none;
      background-color: transparent;
      height: 32px !important;
      line-height: 32px !important;
      color: var(--business-condition-input-text-color);
      font-size: 12px;
      font-family: MicrosoftYaHei;
    }

  }

  .my-select {
    margin-right: 0 !important;

    .el-select {
      width: 100%;
    }
  }

  .el-textarea__inner {
    border: none;
    padding-left: 0;
    background-color: transparent;
    color: rgba(0, 8, 26, 1);
    font-size: 12px;
  }

  &:hover {
    border: 1px solid var(--business-condition-hover-border-color);
  }

  .is-disabled input {
    background: transparent !important;
  }
}

/*
*	业务模块-按钮（图标文字两行显示）
*  <div class="businessButtonInline">
*     <span class="businessButtonAdd"></span>
*     <span>新增</span>
*    </div>
*/
.businessButtonInline {
  display: inline-flex;
  flex-direction: column;

  span:first-child {
    width: 56px;
    height: 24px;
    line-height: 24px;
    margin-bottom: 4px;
  }

  span:last-child {
    font-size: 12px;
    color: var(--business-buttonInline-text-color);
  }
}

/*
*	业务模块-新增按钮
*	<span class="businessButtonAdd">新增</span>
*
*	业务模块-编辑按钮
*	<span class="businessButtonEdit">编辑</span>
*
*	业务模块-导入按钮
*	<span class="businessButtonImport">导入</span>
*
*	业务模块-导出按钮
*	<span class="businessButtonExport">导出</span>
*
*	业务模块-导出按钮
*	<span class="businessButtonDownload">下载</span>
*
*	业务模块-查看流程按钮
*	<span class="businessButtonViewFlow">下载</span>
*
*	业务模块-有图标不可用按钮
*	<span class="businessButtonDisabled">按钮</span>
*/
.businessButtonAdd,
.businessButtonEdit,
.businessButtonImport,
.businessButtonExport,
.businessButtonDownload,
.businessButtonViewFlow,
.businessButtonCustom {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  padding: 0 16px;
  background: var(--business-button-bgc);
  border-radius: 4px;
  color: rgba(0, 128, 255, 1);
  font-family: MicrosoftYaHei;
  cursor: pointer;

  &:hover {
    background: var(--business-button-hover-bgc);
    border-radius: 4px;
    color: rgba(0, 128, 255, 1);
  }

  &:active {
    opacity: 0.6;
  }
}

.businessButtonAdd::before {
  font-family: "iconfont";
  content: "\e6a8";
  font-size: 1em;
}

.businessButtonEdit::before {
  font-family: "iconfont";
  content: "\e696";
  font-size: 16px;
}

.businessButtonImport::before {
  font-family: "iconfont";
  content: "\e6a1";
  font-size: 16px;
}

.businessButtonExport::before {
  font-family: "iconfont";
  content: "\e6ac";
  font-size: 16px;
}

.businessButtonDownload::before {
  font-family: "iconfont";
  content: "\e6ad";
  font-size: 16px;
}

.businessButtonViewFlow::before {
  font-family: "iconfont";
  content: "\e6a6";
  font-size: 16px;
}

/*
*	业务模块-删除按钮
*	<span class="businessButtonDelete">删除</span>
*/
.businessButtonDelete {
  display: inline-block;
  padding: 0 16px;
  height: 32px;
  line-height: 32px;
  background: var(--business-button-delete-bgc);
  border-radius: 4px;
  color: var(--business-button-delete-text-color);
  cursor: pointer;

  &::before {
    font-family: "iconfont";
    content: "\e6a0";
    font-size: 1em;
  }

  &:hover {
    background: rgba(255, 51, 51, 0.2);
  }

  &:active {
    opacity: 0.6;
  }
}

/*
*	业务模块-不可用按钮（有图标）
*	<span class="businessButtonDisabled">随便你写什么东西吧</span>
*/
.businessButtonDisabled,
.businessButtonDisabled:hover,
.businessButtonDisabled:active {
  background: var(--business-button-disabled-bgc);
  color: var(--business-button-disabled-text-color);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
}

/*
*   业务模块-无图标蓝色按钮
*	<span class="businessButtonConfirm">确定/保存/查询</span>
*
*   业务模块-无图标灰色按钮
*	<span class="businessButtonCancel">取消/清除</span>
*
*   业务模块-无图标不可用按钮
*	<span class="businessButtonCancel disabled">不可用</span>
*/
.businessButtonConfirm,
.businessButtonCancel {
  white-space: nowrap;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  padding: 0 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-family: MicrosoftYaHei;
}

.businessButtonConfirm {
  background: rgba(0, 128, 255, 1);
  box-shadow: var(--business-button-confirm-boxshadow);
  color: var(--business-button-confirm-text-color);

  &:hover {
    background: rgba(51, 153, 255, 1);
  }

  &:active {
    background: rgba(0, 102, 204, 1);
  }

  &.disabled,
  &.disabled:hover,
  &.disabled:active {
    cursor: not-allowed;
    opacity: 0.4;
    background: var(--business-button-confirm-disabled-bgc);
  }
}

.businessButtonCancel {
  background: var(--business-button-cancel-bgc);
  color: var(--business-button-cancel-text-color);

  &:hover {
    color: var(--business-button-cancel-hover-text-color);
    background: var(--business-button-cancel-hover-bgc);
  }

  &:active {
    color: var(--business-button-cancel-active-text-color);
    background: var(--business-button-cancel-active-bgc);
  }

  &.disabled,
  &.disabled:hover,
  &.disabled:active {
    cursor: not-allowed;
    background: var(--business-button-cancel-disabled-bgc);
    color: var(--business-button-cancel-disabled-text-color);
  }
}

/*
*	业务模块-流程按钮-未上报
*	<div class="businessButtonFlow_unreported">
*		<span>24</span>
*		<span>未上报</span>
*	</div>
*
*	业务模块-流程按钮-流程中
*	<div class="businessButtonFlow_flowing">
*		<span>1240</span>
*		<span>流程中</span>
*	</div>
*
*	业务模块-流程按钮-已完成
*	<div class="businessButtonFlow_completed">
*		<span>1</span>
*		<span>已完成</span>
*	</div>
*
*	业务模块-流程按钮-已作废
*	<div class="businessButtonFlow_invalid">
*		<span>2</span>
*		<span>已作废</span>
*	</div>
*/

.businessButtonFlow_unreported,
.businessButtonFlow_flowing,
.businessButtonFlow_completed,
.businessButtonFlow_invalid {
  height: 32px;
  display: inline-flex;
  align-items: center;
  background: var(--business-flowButton-unreported-bgc);
  border-radius: 16px;
  border: 1px solid transparent;
  cursor: pointer;

  span {
    height: 32px;
    line-height: 32px;

    &:first-child {
      background: rgba(255, 170, 0, 1);
      box-shadow: var(--business-flowButton-unreported-boxshadow);
      border-radius: 16px;
      padding: 0 12px;
      font-size: 16px;
      font-family: DINAlternate-Bold, DINAlternate;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
    }

    &:last-child {
      padding-left: 8px;
      padding-right: 12px;
      font-size: 12px;
      font-family: MicrosoftYaHei;
      color: rgba(255, 170, 0, 1);
      height: 30px;
      white-space: nowrap;
    }
  }

  &:hover {
    border: 1px solid rgba(255, 170, 0, 0.3);
  }

  // &:active {
  //   box-shadow: var(--business-flowButton-unreported-boxshadow);
  //   background: rgba(255, 170, 0, 1);
  //   flex-direction: row-reverse;

  //   span {
  //     box-shadow: 0 !important;
  //     color: rgba(255, 255, 255, 1) !important;
  //   }
  // }
}

.businessButtonFlow_flowing {
  background: var(--business-flowButton-flowing-bgc);

  span {
    &:first-child {
      background: rgba(0, 128, 255, 1);
      box-shadow: var(--business-flowButton-flowing-boxshadow);
    }

    &:last-child {
      color: rgba(0, 128, 255, 1);
    }
  }

  &:hover {
    border: 1px solid rgba(0, 128, 255, 0.3);
  }

  // &:active {
  //   box-shadow: var(--business-flowButton-flowing-boxshadow);
  //   background: rgba(0, 128, 255, 1);
  // }
}

.businessButtonFlow_completed {
  background: var(--business-flowButton-completed-bgc);

  span {
    &:first-child {
      background: rgba(82, 204, 20, 1);
      box-shadow: var(--business-flowButton-completed-boxshadow);
    }

    &:last-child {
      color: rgba(82, 204, 20, 1);
    }
  }

  &:hover {
    border: 1px solid rgba(82, 204, 20, 0.3);
  }

  // &:active {
  //   box-shadow: var(--business-flowButton-completed-boxshadow);
  //   background: rgba(82, 204, 20, 1);
  // }
}

.businessButtonFlow_invalid {
  background: var(--business-flowButton-invalid-bgc);

  span {
    &:first-child {
      background: rgba(147, 149, 153, 1);
      box-shadow: var(--business-flowButton-invalid-boxshadow);
    }

    &:last-child {
      color: rgba(147, 149, 153, 1);
    }
  }

  &:hover {
    border: 1px solid rgba(147, 149, 153, 0.3);
  }

  // &:active {
  //   box-shadow: var(--business-flowButton-invalid-boxshadow);
  //   background: rgba(147, 149, 153, 1);
  // }
}

/*
*	业务模块-页码
*	<el-pagination
*    	class="businessPagination"
*	 	layout="total, sizes, prev, pager, next, jumper"
*	 >
*	 </el-pagination>
*/
.businessPagination {
  height: 56px;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  position: relative;

  .el-pagination__total {
    position: absolute;
    left: 16px;
    color: var(--business-pagination-total-text-color);
  }
}

.businessPagination .businessPagination .el-pagination__sizes {
  height: 32px !important;
  line-height: 32px !important;
}

.businessPagination .el-pagination__sizes .el-select .el-input input {
  height: 32px;
  line-height: 32px;
  background: var(--business-pagination-button-bgc);
  border-radius: 4px;
  border: 1px solid var(--business-pagination-button-border-color);
  color: var(--business-pagination-button-text-color);
}

.businessPagination .btn-prev,
.businessPagination .btn-next,
.businessPagination .el-pager li {
  width: 32px;
  height: 32px;
  background: var(--business-pagination-button-bgc) !important;
  border-radius: 4px !important;
  border: 1px solid var(--business-pagination-button-border-color) !important;
}

.businessPagination .el-pager li {
  margin: 0 !important;
  border-radius: 0 !important;
  margin-left: -1px !important;
  height: 32px !important;
  line-height: 32px !important;
}

.businessPagination .el-pager li:first-child {
  border-radius: 4px 0px 0px 4px !important;
}

.businessPagination .el-pager li:last-child {
  border-radius: 0px 4px 4px 0px !important;
}

.businessPagination .el-pager li.active {
  background: rgba(0, 128, 255, 1) !important;
  box-shadow: 0px 2px 4px 0px rgba(0, 128, 255, 0.4);
  border-radius: 4px !important;
  border: none !important;
}

.businessPagination .el-pagination__jump,
.businessPagination .el-pagination__jump .el-input,
.businessPagination .el-pagination__jump .el-input input {
  height: 32px !important;
  line-height: 32px !important;
}

.businessPagination .el-pagination__jump {
  color: var(--business-pagination-total-text-color);
  margin-left: 8px !important;
}

/*
*	业务模块-表格
*	<el-table class="businessTable"></el-table>
*/
.businessTable {
  background: transparent;

  &::before {
    background-color: var(--business-table-bottom-border-color);
  }

  // 头部
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 40px;
    background-color: var(--business-table-header-bgc);
    border: none;
    border-bottom: var(--business-table-header-boder-bottom);
    border-top: var(--business-table-header-boder-top);

    .cell {
      font-size: 12px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: var(--business-table-header-text-color);

      .el-checkbox {
        .el-checkbox__inner {
          border-radius: 2px;
          border: 1px solid var(--business-checkbox-border-color);
          background-color: var(--business-checkbox-bgc);
        }

        &.is-checked,
        .is-indeterminate {
          .el-checkbox__inner {
            background-color: rgba(0, 128, 255, 1);
            border: 1px solid rgba(0, 128, 255, 1);
          }
        }
      }
    }

    .el-table-column--selection .cell {
      padding-left: 17px;
    }
  }

  .el-table__body tr {
    background: transparent;

    td {
      padding: 0;
      height: 40px !important;
      background-color: transparent !important;
      box-shadow: 0px 1px 0px 0px var(--business-table-row-boxshadow);
      border: none;

      .cell {
        height: 16px;
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: var(--business-table-text-color);
        line-height: 16px;

        .el-checkbox {
          .el-checkbox__inner {
            border-radius: 2px;
            border: 1px solid var(--business-checkbox-border-color);
            background-color: var(--business-checkbox-bgc);
          }

          &.is-checked {
            .el-checkbox__inner {
              background-color: rgba(0, 128, 255, 1);
              border: 1px solid rgba(0, 128, 255, 1);
            }
          }
        }
      }
    }

    .el-table-column--selection .cell {
      padding-left: 17px;
    }
  }
}

/*
*	业务模块-弹窗
*	<div class="businessMask"> // 遮罩
*		<div class="businessDialog large/middle/small"> // 大中小尺寸
*			<div class="dialog-header">
*				<span>弹窗标题</span>
*				<span class="icon iconfont iconbiaoqianlan-guanbi"></span>
*			</div>
*	    	<div class="dialog-body"></div>
*	    	<div class="dialog-footer right"></div> // 底部按钮区可不写;right-按钮在右边，默认居中
*		</div>
*	</div>
*/
.businessDialog {
  position: absolute;
  margin: auto;
  background: var(--business-dialog-bgc);
  box-shadow: 0px -4px 0px 0px rgba(0, 128, 255, 1);
  border-radius: 4px;
  overflow: hidden;
  animation: myscale 0.4s;

  &.large {
    width: 904px;
    height: 600px;
  }

  &.middle {
    width: 456px;
    height: 342px;
  }

  &.small {
    width: 360px;
    height: 180px;
  }

  .dialog-header {
    height: 48px;
    line-height: 48px;
    width: 100% !important;
    padding: 0 17px;
    background: var(--business-dialog-header-bgc);
    border-radius: 4px 4px 0px 0px;
    font-size: 16px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: var(--business-dialog-header-text-color);

    span {
      float: left;
    }

    .icon {
      cursor: pointer;
      float: right;
    }
  }

  .dialog-body {
    height: calc(100% - 96px);
    overflow: auto;
    padding: 16px;

    .buttons-wrapper {
      // 按钮区
      width: 100%;
      height: 56px;
      margin-bottom: 16px;
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
      box-shadow: 0px 1px 0px 0px rgba(245, 248, 250, 1);
    }
  }

  .dialog-footer {
    height: 48px;

    span {
      margin-left: 12px;
    }

    &.right {
      text-align: right;
      padding-right: 16px;
    }
  }
}

.businessDialog-hide {
  position: absolute;
  margin: auto;
  background: var(--business-dialog-bgc);
  box-shadow: 0px -4px 0px 0px rgba(0, 128, 255, 1);
  border-radius: 4px;
  border-radius: 4px;
  overflow: hidden;
  animation: myscalehide 0.4s;
  transform: scale(0.6);
  opacity: 0;
}

/*
*	业务模块-输入框
*   <div class="businessInput">
*     <label>label</label>
*	    <el-input></el-input>
*   </div>
*/
.businessInput {
  display: inline-flex;
  height: 32px;
  position: relative;

  label {
    white-space: nowrap;
    display: inline-block;
    width: 120px !important;
    height: 32px;
    line-height: 32px;
    text-align: left;
    background: var(--business-input-label-bgc);
    box-shadow: 0px 0px 0px 1px var(--business-input-label-border-color);
    padding-left: 8px;
    font-size: 12px;
    color: var(--business-input-label-color);
  }

  .el-input input,
  textarea {
    color: var(--business-input-text-color);
    background: var(--business-input-bgc);
    box-shadow: -1px 1px 0px 0px var(--business-input-boxshadow),
      1px -1px 0px 0px var(--business-input-boxshadow);
    border: none;
    border-radius: 0;
    font-size: 12px;
  }

  .el-select {
    width: 100%;
  }

  .el-input input {
    height: 32px;
  }

  .upload-demo {
    position: absolute;
    right: 0;
  }
}

/*
*	业务模块-查询输入框
*	<el-input class="businessSearchInput"></el-input>
*/
.businessSearchInput {
  width: 188px;
  height: 32px !important;
  line-height: 32px !important;

  input {
    border: 1px solid transparent;
    background: var(--business-search-input-bgc);
    border-radius: 4px !important;
    height: 32px !important;
    line-height: 32px !important;
    color: var(--business-search-input-text-color);

    &:hover {
      border: 1px solid var(--business-search-input-border-color);
    }

    &:active,
    &:focus {
      border: 1px solid var(--business-search-input-focus-border-color);

      ~.el-input-group__append {
        color: var(--business-search-input-icon-color);
      }
    }

    ~.el-input-group__append {
      border: none;
      background-color: transparent;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(196, 199, 204, 1);
    }
  }
}

/*
*	业务模块-勾选框
*   <el-checkbox class="businessCheckbox"></el-checkbox>
*/
.businessCheckbox {
  .el-checkbox__label {
    color: var(--business-checkbox-text-color);
  }

  .el-checkbox__inner {
    background-color: var(--business-checkbox-bgc);
    border: 1px solid var(--business-checkbox-border-color);
  }
}

/* 动画 */
/* 弹窗-打开 */
@keyframes show {
  0% {
    transform: scale3d(0.5, 0.5, 0.5);
    opacity: 0;
  }

  50% {
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
  }

  100% {
    transform: scale3d(1, 1, 1);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
  }
}

/*placeholder 颜色*/
input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: var(--placeholder-color);
}

input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: var(--placeholder-color);
}

input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: var(--placeholder-color);
}

input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: var(--placeholder-color);
}

.diableDiv {
  background: #f5f7fa;
}
</style>
